<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登录</title>

    <link rel="stylesheet" th:href="@{/webjars/bootstrap/css/bootstrap.min.css}"/>

    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
    <script th:src="@{/webjars/bootstrap/js/bootstrap.min.js}"></script>

  </head>
  <body>


    <div class="container" style="width: 320px;margin-top: 100px;">
      <h3 align="center">OAuth2登录</h3>
      <p class="alert-danger" style="text-align: center" th:if="${error}">用户名或密码错误!</p>
      <p id="notice_null" class="alert-danger" style="text-align: center;">用户名或密码不能为空!</p>
      <form th:action="@{/login}" method="post" onsubmit="return onsubmitCheck()">
        <table class="table">
          <tr>
            <td>用户名:</td>
            <td>
              <label><input type="text" id="username" name="username"/></label>
            </td>
          </tr>
          <tr>
            <td>密码:</td>
            <td>
              <label><input type="password" id="password" name="password"/></label>
            </td>
          </tr>

          <tr>
            <td></td>
            <td>
              <button class="btn-success" type="submit">登录</button>
            </td>
          </tr>
        </table>
      </form>

    </div>

    <script type="text/javascript">
      $(function(){
        //默认不显示错误提醒
        $("#notice_null").hide();
      });

      function onsubmitCheck(){
        var username = $("#username").val();
        var password = $("#password").val();

        if(username == "" || password == ""){
          $("#notice_null").show();
          return false;
        }

        return true;
      }

    </script>
  </body>
</html>
